<template>
  <div class="app-container banner_page">
    <div v-if="!showEdit" style="padding: 10px;background: #fff;">
      <el-row style="background: #fff;margin-bottom: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;">
        <el-col :span="22">
          <el-input v-model="username" placeholder="用户名搜索" clearable style="width: 120px;" />
          <el-input v-model="nickname" placeholder="微信昵称搜索" clearable style="width: 120px;" />
          <el-select v-model="status" placeholder="用户状态" style="width: 120px;">
            <el-option
              v-for="item in statusoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div style="padding-top: 10px;">
            <el-button type="primary" @click="getData(1)">搜索</el-button>
          </div>

        </el-col>

      </el-row>
      <el-row style="background: #fff;margin-bottom: 10px;">
        <el-col :span="22">
          <el-button style="border-color: #409EFF;color: #409EFF;" @click="handleUser('dialogCheckVisible')">审核</el-button>
          <el-button style="border-color: #409EFF;color: #409EFF;" @click="handleUser('dialogSealVisible')">封禁</el-button>
          <el-button type="" style="border-color: #409EFF;color: #409EFF;" @click="handleUser('dialogFormVisible')">增加余额</el-button>
        </el-col>
        <el-col :span="2">
          <div class="total_bar">
            <span>共{{ count }}条</span>
          </div>
        </el-col>

      </el-row>
      <el-table
        ref="multipleTable"
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
        />
        <el-table-column
          prop="uid"
          label="uid"
        />
        <el-table-column
          prop="username"
          label="用户名"
        />
        <el-table-column
          label="头像"
        >
          <template slot-scope="scope">
            <img class="tab_img" :src="scope.row.headimgurl" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系方式"
          width="80"
        />
        <!-- <el-table-column
          prop="nickname"
          label="微信昵称"
          show-overflow-tooltip
        /> -->
        <el-table-column
          prop="publishyear"
          label="用户状态"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              scope.row.status==0?'未审核':
              scope.row.status==1?'审核通过':
              scope.row.status==2?'审核未通过':
              scope.row.status==3?'待审核':
              scope.row.status==4?'已封禁':'其他'
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="integral"
          label="账户余额"
          show-overflow-tooltip
        />
        <el-table-column
          prop="shelftime"
          label="已完成订单"
          show-overflow-tooltip
        />
        <el-table-column
          prop="shelftime"
          label="未完成订单"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showEditpage(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;align-items: center;justify-content: center;padding: 20px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="20"
          :page-count="total"
          :total="count"
          @current-change="getData"
        />
      </div>

    </div>
    <div v-else>
      <edit :editdata="addData" class="edit" />
    </div>

    <el-dialog title="审核用户" :visible.sync="dialogCheckVisible" @closed="handleCloseDialog(1)">
      <div>
        <el-radio-group v-model="statusrideo">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">未通过</el-radio>
        </el-radio-group>
        <transition name="el-fade-in-linear">
          <div v-if="statusrideo == 2" style="margin-top: 10px;border: 1px solid #F1F1F1;padding: 10px;">
            <div style="margin-bottom: 10px;">理由</div>
            <el-checkbox-group v-model="examinereason">
              <el-checkbox label="1">用户名违规</el-checkbox>
              <el-checkbox label="2">头像违规</el-checkbox>
            </el-checkbox-group>
          </div>
        </transition>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCheckVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkStatus">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="封禁用户" :visible.sync="dialogSealVisible" @closed="handleCloseDialog(2)">
      <div>
        <div style="margin-bottom: 10px;">封禁时长</div>
        <el-radio-group v-model="sealday">
          <el-radio :label="1">永久</el-radio>
          <el-radio :label="2">10天</el-radio>
          <el-radio :label="3">30天</el-radio>
          <el-radio :label="4">365天</el-radio>
        </el-radio-group>
        <div style="margin: 10px 0;">封禁理由</div>
        <el-checkbox-group v-model="sealreason">
          <el-checkbox label="1">用户名违规</el-checkbox>
          <el-checkbox label="2">头像违规</el-checkbox>
          <el-checkbox label="3">行为违规（发布广告&不文明用语）</el-checkbox>
        </el-checkbox-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSealVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkSeal">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="增加余额" :visible.sync="dialogFormVisible" @closed="handleCloseDialog(3)">
      <div>
        <div>
          <div class="ad_item" style="align-items: center;margin-bottom: 10px;"><span>修改余额为</span></div>
          <el-input ref="newIntegral" v-model="new_integral" placeholder="请输入金额" :maxlength="50" @keyup.native="new_integral=new_integral.replace(/[^\d]/g, '')" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveIntegral">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { userindex, usersExamine, usersSeal, userIntegralAdd } from '@/api/users'
import edit from './edit'
export default {
  components: {
    edit
  },
  data() {
    return {
      showEdit: false,
      dialogCheckVisible: false,
      dialogSealVisible: false,
      dialogFormVisible: false,
      statusoptions: [
        { value: '0', label: '全部' },
        { value: '1', label: '审核通过' },
        { value: '2', label: '审核未通过' },
        { value: '3', label: '待审核' },
        { value: '4', label: '已封禁' },
        { value: '5', label: '未审核' }
      ],

      tableData: [],
      multipleSelection: [],

      nickname: '',
      username: '',
      status: '',

      statusrideo: '',
      examinereason: [],

      sealday: '',
      sealreason: [],

      new_integral: '',

      total: 1,
      count: 1
    }
  },
  created() {
    this.getData(1)
  },
  methods: {
    handleUser(dialogVisible) {
      if(this.multipleSelection.length === 0) {
        this.$message({
          type: 'error',
          message: '请先选择用户'
        })
        return
      }
      this[dialogVisible] = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    showEditpage(data) {
      this.showEdit = true
      this.addData = data
    },
    closeEditpage() {
      this.showEdit = false
      this.getData(1)
    },
    getData(e) {
      console.log(e)
      userindex({
        username: this.username,
        nickname: this.nickname,
        status: this.status,
        page: e
      }).then(res => {
        this.tableData = res.detail.data.list
        this.count = Number(res.detail.data.count)
        this.total = Number(res.detail.data.total)
      })
    },
    checkStatus() {
      const self = this
      const usersid = []
      if(!this.statusrideo) {
        this.$message({
          type: 'error',
          message: '请选择审核状态'
        })
        return
      }
      self.multipleSelection.forEach(row => {
        usersid.push(row.usersid)
      })
      const examinereason = this.examinereason.toString()
      usersExamine({ usersid: usersid.toString(), status: this.statusrideo, examinereason: examinereason }).then(res => {
        this.dialogCheckVisible = false
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.$refs.multipleTable.clearSelection()
        self.tableData.forEach(row => {
          usersid.forEach(id => {
            row.usersid == id ? row.status = self.statusrideo : row.status
          })
        })
      })
    },
    checkSeal() {
      const self = this
      const usersid = []
      self.multipleSelection.forEach(row => {
        usersid.push(row.usersid)
      })
      const sealreason = this.sealreason.toString()
      usersSeal({ usersid: usersid.toString(), sealday: 0, sealreason: sealreason }).then(res => {
        this.dialogSealVisible = false
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.$refs.multipleTable.clearSelection()
        self.tableData.forEach(row => {
          usersid.forEach(id => {
            row.usersid == id ? row.status = '4' : row.status
          })
        })
      })
    },
    saveIntegral() {
      // 校验
      if(!this.new_integral) {
        this.$message.error('请输入余额')
        this.$refs.newIntegral && this.$refs.newIntegral.focus()
        return
      }
      const self = this
      const usersid = []
      self.multipleSelection.forEach(row => {
        usersid.push(row.usersid)
      })
      userIntegralAdd({ usersid: usersid.toString(), integral: this.new_integral }).then(res => {
        if (res.detail.status == 1) {
          this.dialogFormVisible = false
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.$refs.multipleTable.clearSelection()
          this.getData(1)
          // self.tableData.forEach(row => {
          //   usersid.forEach(id => {
          //     row.usersid == id ? row.integral = Number(row.integral) + Number(self.new_integral) : row.integral
          //   })
          // })
        }
      })
    },
    // 关闭弹窗时数据表单初始化
    handleCloseDialog(type) {
      // 审核
      if(type === 1) {
        this.statusrideo = ''
        this.examinereason = []
      } else if (type === 2) { // 封禁
        this.sealday = ''
        this.sealreason = []
      } else if (type === 3) { // 增加余额
        this.new_integral = ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-row{
	.el-button{
		min-width: 120px;
	}
}

.banner_page{
	position: relative;
	background: #f1f1f1;
}
.total_bar{
		height: 40px;
		line-height: 40px;
	}
	.tab_img{
		width: 20px;
		height: 20px;
	}

</style>

